<template>
	<div :class="['app-editor-container', 'app-slider', `app-slider-${name}`]">
		<a-slider
			:value="value"
			:min="min"
			:max="max"
			:step="step"
			:disabled="disabled || readOnly"
			@change="onChange"
		/>
	</div>
</template>

<script setup lang="ts">
import { IEvent } from '@/core';
import { sliderProps } from './slider';

interface EditorEmit {
	(name: 'component-action', value: IEvent<string>): void;
}
const props = defineProps(sliderProps);
const emit = defineEmits<EditorEmit>();

const onChange = (value: any) => {
	emit('component-action', {
		name: `${props.name}`,
		action: 'valueChange',
		data: value,
	});
};
</script>
